<template>
    <view class="hpv-choose">
        <view>
            <view class="hpv-type">{{ hpvData.name }}</view>
            <view class="hpv-age">
                <text v-for="(m, i) in hpvData.describe" :key="i">{{ m }}</text>
            </view>
        </view>
        <view class="hpv-price">¥{{ hpvData.price[0] }}-¥{{ hpvData.price[1] }}</view>
    </view>
    <!-- 表单填写 -->
    <view class="xinguan-view">
        <view class="xinguan-flex">
            <text>真实姓名</text>
            <input placeholder="请输入真实姓名" placeholder-class="input-style" />
        </view>
        <view class="xinguan-flex">
            <text>身份证</text>
            <input placeholder="请输入身份证" placeholder-class="input-style" />
        </view>
        <view class="xinguan-flex">
            <text>性别</text>
            <picker mode="selector" :range="['男', '女']" class="flex-left" @change="changeSelector">
                <view>
                    <text>请选择性别</text>
                    <image src="/static/other/gengduo.svg"></image>
                </view>
            </picker>
        </view>
        <view class="xinguan-flex">
            <text>出生日期</text>
            <picker mode="date" class="flex-left" @change="changeDate">
                <view>
                    <text>请选择出生日期</text>
                    <image src="/static/other/gengduo.svg"></image>
                </view>
            </picker>
        </view>
        <view class="xinguan-flex">
            <text>手机号</text>
            <input placeholder="请输入手机号" type="number" placeholder-class="input-style" />
        </view>
    </view>
    <!-- 选择套餐 -->
    <view class="combo-view">
        <block>
            <text class="combo-title">套餐名称</text>
            <view class="combo-list">
                <text v-for="(item, index) in ['疫苗', '疫苗+HPV筛选']" :key="index" :class="index == 0 ? 'checkstyle' : ''"
                    @click="changCombo()">{{ item }}</text>
            </view>
        </block>
        <!-- 接种时间 -->
        <block>
            <text class="combo-title">预约接种时间}</text>
            <view class="combo-list">
                <text v-for="(item, index) in ['现货7天', '现货30天', '现货10天']" :key="index"
                    :class="index == 0 ? 'checkstyle' : ''" @click="changTime()">{{ item }}</text>
            </view>
        </block>
    </view>
    <!-- 提交 -->
    <view style="height:300rpx"></view>
    <view class="Total-view">
        <text>合计:¥1000</text>
        <text @click="subMit">提交</text>
    </view>
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { reactive, watch, toRefs } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import { hpvDataType } from '@/types/index';


// 2.定义页面响应式数据
let pageData = reactive({
    hpvData: {} as hpvDataType,//hpv详情数据
})

// 3.批量解构创建响应式数据
let { hpvData } = toRefs(pageData)


// 4.获取页面跳转传递的数据
onLoad((options: any) => {
    pageData.hpvData = JSON.parse(options.value)
})



</script>
  
  
<style>
/* 表单提交 */
@import url('../../common-style/form.css');

page {
    background-color: #fafafa;
}

.hpv-choose {
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    padding: 20rpx;
    margin-bottom: 40rpx;
}

.hpv-type {
    font-size: 35rpx;
}

.hpv-age {
    display: flex;
    align-items: center;
}

.hpv-age text {
    background-color: #f4f6fa;
    padding: 7rpx;
    font-size: 25rpx;
    margin: 10rpx 10rpx 10rpx 0;
}

.hpv-price {
    font-weight: bold;
    color: #ff5f2c;
}

/* 套餐 */
.combo-view {
    background-color: #ffffff;
    padding: 20rpx;
    margin: 20rpx 0;
}

.combo-title {
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
}

.combo-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.combo-list text {
    padding: 20rpx 40rpx;
    background-color: #f5f5f5;
    margin: 0 20rpx 20rpx 0;
    border-radius: 10rpx;
    display: block;
}

/* 选中加上样式 */
.checkstyle {
    background-color: #2c76ef !important;
    color: #ffffff !important;
}
</style>